<template>
  <n-space vertical>
    <n-card>
      <n-form ref="form" inline :model="formState">
        <n-form-item label="物品名称">
          <n-input v-model:value="formState.name" placeholder="物品名称" />
        </n-form-item>
        <n-form-item label="物品编号">
          <n-input v-model:value="formState.material_id" placeholder="物品编号" />
        </n-form-item>
        <n-form-item label="所属仓库">
          <n-select
            style="min-width: 150px"
            v-model:value="formState.warehouse_id"
            placeholder="所属仓库"
            :options="warehouseList"
          />
        </n-form-item>
        <n-form-item>
          <n-button type="primary">查询</n-button>
        </n-form-item>
      </n-form>
    </n-card>

    <n-data-table
      remote
      ref="table"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :loading="loading"
    />
  </n-space>
</template>

<script setup lang="ts">
import {
  NButton,
  NCard,
  NSpace,
  NForm,
  NFormItem,
  NInput,
  NDataTable,
  NImage,
  NSelect,
  type DataTableColumn,
  NTag
} from 'naive-ui'
import { GetMaterialListApi } from '@/apis/material'
import { ref, onMounted, h } from 'vue'

const loading = ref<boolean>(true)
const pagination = ref({
  page: 1,
  pageSize: 10
})
const data = ref<any[]>([])
const formState = ref({
  name: '',
  material_id: '',
  warehouse_id: null
})
const warehouseList = ref([
  {
    label: '仓库1',
    value: 1
  },
  {
    label: '仓库2',
    value: 2
  }
])

const columns = ref<DataTableColumn[]>([
  {
    title: 'ID',
    key: 'id'
  },
  {
    title: '物品名称',
    key: 'name'
  },
  {
    title: '物品封面',
    key: 'cover',
    render(row: any) {
      return h(NImage, {
        src:
          row?.cover_info?.url_small ||
          ('https://foruda.gitee.com/images/1703181345775980882/f0a8ef61_930386.png' as string),
        width: 100,
        height: 100,
        lazy: true,
        fallbackSrc: 'https://foruda.gitee.com/images/1703181345775980882/f0a8ef61_930386.png'
      })
    }
  },
  {
    title: '物品编号',
    key: 'material_id',
    render(row: any) {
      return h(
        NTag,
        {
          type: 'info'
        },
        {
          default: () => row.material_id
        }
      )
    }
  },
  {
    title: '物品型号',
    key: 'specs',
    render(row: any) {
      return h(
        NTag,
        null,
        {
          default: () => row.specs || null
        }
      )
    }
  },
  {
    title: '库存数量',
    key: 'total'
  },
  {
    title: '物品单位',
    key: 'unit'
  },
  {
    title: '更新时间',
    key: 'update_time'
  },
  {
    title: '操作',
    key: 'action',
    render(row) {
      const actions = [
        h(
          NButton,
          {
            type: 'primary',
            size: 'small',
            class: 'mr-1',
            onClick: () => {
              console.log(row.id)
            }
          },
          {
            default: () => '编辑'
          }
        ),
        h(
          NButton,
          {
            type: 'error',
            size: 'small',
            class: 'mr-1',
            onClick: () => {
              console.log(row.id)
            }
          },
          {
            default: () => '删除'
          }
        )
      ]
      return actions
    }
  }
])

function loadData() {
  GetMaterialListApi({
    page: pagination.value.page,
    pageSize: pagination.value.pageSize
  }).then((res) => {
    data.value = res.data as unknown as any[]
    loading.value = false
  })
}

onMounted(() => {
  loadData()
})
</script>
